<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- 使用Jstl 必須要用的指令  -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
	<!-- 使用 fn 必須要用的指令  -->
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 引用css -->
<link rel="stylesheet" type="text/css" href="<c:url value="/css/Maps.css"/>" /> 
<script type="text/javascript" src="<c:url value="/js/jquery-1.9.1.js" />"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head>
<body>
<%@ include file="/menu.jsp" %> 
 <div id="map" style="width: 800px; height: 500px;margin:0px auto"></div>

  <script type="text/javascript">
  	var locations = new Array('${fn:length(maps)}');//maps總共有幾筆 
  	  <c:forEach var="bean"  items="${maps}">	
  	  	var content = '<img src="/i_plus/images/map/${bean[5]}.jpg" style="width:240px;" ><br>'+
    	'<a href=" <c:url  value="/View/MapServlet.controller?id=${bean[1]}" />"><h3>${bean[5]}</h3></a><br>'+
    	'${bean[2]}'; 
  		locations.push([ content, '${bean[3]}', '${bean[4]}', 15]);
  	  </c:forEach>

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(25.03, 121.63),//地圖起始座標
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
	
    var infowindow = new google.maps.InfoWindow({
    	maxWidth: 360,//最大寬度
    	minWidth: 360,
        arrowSize: 30
		
    });
    

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
     	 marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),//座標
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);//title
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>

  <form >   
<table>
	<thead>
	<!-- 要顯示的欄位 -->
             <tr>
			<!-- 	<td>搜尋:</td>
				<td><textarea id="txtAddress" rows="1" cols="10"></textarea></td>  -->
            <!--  <th>標題</th> -->
            <!-- <th>經度</th> -->
            <!-- <th>緯度</th> -->
            <!-- <th>發文者</th> -->
             </tr>
    </thead>
</table>
  	  <a href="/i_plus/View/MapPublish.jsp"><input id="button" type="button" value="發文 "/></a>
</body>

</html>